.myAccount{
	width: 100%;
	height: 100%;
	.firstPart {
		padding: 0 5%;
		width: 100%;
		height: 35%;
		box-sizing: border-box;
		border-bottom: 1px dashed #ddd;
		position: relative;
		.close {
			font-size: 15px;
			position: absolute;
			right: 8px;
			top: 10px;
			color: #e38282;
			font-weight: bold;
			cursor: pointer;
		}
		.title {
			height: 28%;
			span {
				font-weight: 600;
				font-size: 16px;
				color: #444;
			}
		}
		.MGbox {
			width: 100%;
			height: 72%;
			.item {
				width: 30%;
				margin-right: 5%;
				height: 80%;				
				.messg {
					height: 100%;
					border-radius: 15px;
					box-sizing:border-box;
					box-shadow: 0 0 7px 0 #e1e6f3;
					background-image: linear-gradient(117deg, #e3a0a0, #e38282);
					p{
						color: #fff;
						height: 40%;
					}
					.name {
						font-size: 18px;
					}
					.number {
						font-size: 36px;
					}
				}
				.more {
					height: 20px;
					line-height: 20px;
					text-align: right;
					span {
						color :#999;
						font-size: 14px;
						cursor: pointer;
					}
				}
			}
			.item:last-child {
				margin-right: 0;
			}
			.color2 {
				.messg{
					background-image: linear-gradient(121deg, #6eb6fb, #6b7fff);
		  			box-shadow: 0 0 7px 0 #e1e6f3;
				}
			}
			.color3 {
				.messg {
					background-image: linear-gradient(121deg, #c4e59e, #59e490);
		  			box-shadow: 0 0 7px 0 #e1e6f3;
				}
			}
		}
	}
	.secondPart {
		padding: 0 5%;
		width: 100%;
		height: 65%;
		box-sizing: border-box;
		.title {
			height: 14%;
			span {
				height: 100%;
				font-weight: 600;
				font-size: 16px;
				color: #444;
			}
			.editBtn {
				height: 100%;
				border: none;
				background: none;
				color: #999;
				i {
					padding-right: 10px;
				}
			}
			.editBox {
				height: 100%;
				button {
					height: 100%;
					border: none;
					background: none;
					margin-right: 10px;
				}
				.save {
					color: #3068fe;
				}

			}
		}
		.cash_box {
			height: 86%;
			overflow: auto;
			position: relative;
			.cash_i {
				width: 50%;
				height: 40px;
				line-height: 40px;
				margin-bottom: 10px;
				input {
					height: 100%;
					width: 65%;
					background:none;
					text-indent: 10px;
					border:none;
					box-sizing: border-box;
					border-bottom: 1px solid #fff;
				}
				.cash_i_name {
					width: 30%;
					height: 100%;
					font-weight: 600;
					font-size: 14px;
					padding-right: 5%;
					text-align: right;
					color: #444;
				}
				
			}
			.mask_layer {
				display: block;
				position: absolute;
				left: 0;
				top:0;
				right:0;
				bottom: 0;
			}
		}
		.editer_class {
			.cash_i {
				input {
					border-bottom-color: #ddd;
				}
				.read_only {
					background-color: #eee;
				}
			}
			.mask_layer {
				display: none;
			}
		}
	}
	
	@media screen and (max-width: 1140px) {
		.secondPart {
			.cash_box {
				.cash_i {
					width: 50%;
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		.firstPart {
			.MGbox {
	        	.item {
	        		width: 100%;
	    			height: calc( 33% - 10px );
	    			margin-bottom: 10px;
	        		.messg {
	        			border-radius: .3rem;
	        			padding-top: 0;
	        			p {
	        				height: 100%;
	        				width: 30%;
	        				padding: 0 5%;
	        			}
	        			.name {
	        				float: left;
	        				font-size: .4rem;
	        			}
	        			.number {
	        				float: right;
	        				font-size: .5rem;
	        			}
	        		}
	        	}
	        	.item:last-child {
	        		margin-bottom: 0;
	        	}
	        }
		}
		.secondPart {
			
			.cash_box {
				.cash_i {
					width: 100%;
					height: 1rem;
					line-height: 1rem;
					margin-bottom: 5px;
					input {
						font-size: .3rem;
					}
					.cash_i_name {
						width: 25%;
						font-size: .3rem;
					}
				}
				.cash_i:last-child {
					margin-bottom: 0;
				}
			}
		}
    }
}